<template>
  <div class="app-page">
    <el-tabs ref="orderClass" v-model="activeName" type="card">
      <el-tab-pane v-if="$hasTabPermission(50401)" label="配送员排班" name="first">
        <distribution />
      </el-tab-pane>
      <el-tab-pane v-if="$hasTabPermission(50402)" label="大车司机排班" name="second">
        <vehicle />
      </el-tab-pane>
      <el-tab-pane v-if="$hasTabPermission(50403)" label="大车子账户排班" name="third">
        <subAccount />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import distribution from './components/distribution.vue'
  import vehicle from './components/vehicle.vue'
  import subAccount from './components/subAccount'
  export default {
    name: 'orderClass',
    components: { distribution, vehicle, subAccount },
    data() {
      return {
        activeName: 'first'
      }
    },
    mounted() {
      this.activeName = this.$refs.orderClass.panes.length > 0 ? this.$refs.orderClass.panes[0].name : ''
    },
    methods: {
    }
  }
</script>

<style lang="scss" scoped>
  /deep/.el-tabs__content {
    overflow: auto !important;
  }
</style>
